<template>
  <div class="title">所以订单</div>
  <div class="orderList">
    <ul>
      <li v-for="(order, index) in pageInfo.list" :key="index">
        <!-- 头部 -->
        <div class="header">
          <div class="orderID">订单ID：{{ order.id}}</div>
          <div class="addrDetail">地址：{{ order.addrDetail}}</div>
        </div>
        <!-- 详情、状态 -->
        <div class="orderDetail">
          <el-row>
            <!-- 商品信息 -->
            <el-col :span="16">
              <div class="goodsInfo" v-for="(orderDetail, index) in order.orderDetails" :key="index">
                <el-row>
                  <el-col :span="3">
                    <!-- 图片 -->
                    <el-image
                        fit="contain"
                        style="width: 50px; height: 50px;"
                        :src="`${SERVER_ADDR}/goods/pic/${orderDetail.goods.picList[0].url}`" />
                  </el-col>
                  <el-col :span="19" style="font-size: 14px;">
                    <!-- 商品信息 -->
                    {{ orderDetail.goods.name }} {{ orderDetail.goods.color }} {{ orderDetail.goods.version }} {{ orderDetail.price }} X{{ orderDetail.count }}
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <!-- 状态、操作 -->
            <el-col :span="8">
              <div v-if="order.status === 0">
                <el-button type="warning" @click="toPayPage(order.id)">立即付款</el-button>
              </div>
              <div v-else-if="order.status === 2">
                <el-button type="warning" @click="update(order.id)">确认收货</el-button>
              </div>
              <div v-else>
                {{ ["未支付", "已支付", "已收获", "订单完成", "退换货", "仅退款", "售后", "添加"][order.status] }}
              </div>
            </el-col>
          </el-row>
        </div>
      </li>
    </ul>
  </div>
  <div class="pageNav">
    <el-row class="row-bg" justify="center" style="margin-top: 20px;">
      <el-pagination background layout="prev, pager, next"
                     v-model:current-page="pageInfo.pageNum"
                     :page-count="pageInfo.pages"
                     @change="selectByUser" />
    </el-row>
  </div>

</template>

<script setup>

//查询当前用户的订单信息
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router=useRouter();
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//分页信息
const pageInfo=ref({
  pages:0,
  pageSize:0,
  pageNum: 0
})
function toPayPage(id) {
  router.push({
    path: "/user/pay",
    query: {
      orderId: id
    }
  })
}
//确认收获
function update(id){
  orderApi.update(id)
      .then(resp=>{
        ElMessage.success(resp.msg);
        selectByUser(1,10);

      })

}

function selectByUser(pageNum,pageSize){
  orderApi.selectByUser(pageNum,pageSize)
      .then(resp=>{
        if(resp.code==10000){
          pageInfo.value=resp.data;
        }else {
          ElMessage.error(resp.msg);
        }
      });
}
selectByUser(1,10)
</script>
<style scoped>
.title {
  font-size: 18px;
  font-weight: bold;
}

.orderList, .pageNav {
  margin: 10px 0;
  padding: 20px;
  border: 1px solid #222;
  background-color: #FFF;
}

.orderList ul li {
  border: 1px solid #000000;
  padding: 10px;
  margin-bottom: 10px;
}

.orderList ul li .header {
  border-bottom: 1px solid #000000;
}

.orderList ul li .orderDetail {
  margin-top: 10px;
}

.orderList ul li .orderDetail .goodsInfo {
  margin-bottom: 10px;
  line-height: 50px;
  height: 50px;
}

.orderList ul li .header .orderID {
  font-size: 14px;
  color: #222;
}

.orderList ul li .header .addrDetail {
  font-size: 14px;
  color: var(--theme-color);
}

</style>